<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/list-to-detail.css" />
	</head>

	<body>
		<div class="mui-content">
			<!--顶部banner图 开始-->
			<div id="kr-article-banner" class="kr-article-banner">
				<div id="kr-article-cover" class="kr-article-cover">
					<img :src="cover">
				</div>
				<h2 id="kr-article-title" class="kr-article-title">{{title}}</h2>
			</div>
			<!--顶部banner图 结束-->
			
			<div class="kr-article-content">
				<!-- 文章作者、发布时间等信息 -->
				<div class="kr-article-meta">
					<div id="kr-article-author" class="kr-article-author">{{author}}</div>
					<div class="kr-article-text">发表于</div>
					<div id="kr-article-time" class="kr-article-time">{{time}}</div>
				</div>
			</div>
			<div class="kr-article-content">				<!--文章详细内容-->
				<!--<div id="kr-article-article" class="kr-article-article" v-html="content"></div>-->
				<div id="marticleContent" class="kr-article-article"></div>
			</div>
			<div class="mui-card-content">
				<div  class="mui-card-content-inner">
					<span class="mui-badge mui-badge-danger">“{{author}}”</span>
					<span class="mui-badge mui-badge-danger">“{{authorabout}}”</span>
				</div>
			</div>
		</div>
		<button id='login' class="mui-btn mui-btn-block mui-btn-primary" onclick="openShare()">分享本文</button>

		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
		
			function getDefaultData() {
				return {
					cover: '',
					title: '',
					author: '',
					time: '',
					content: '',
					hot: '',
					authorabout: ''
				}
			}

			var vm = new Vue({
				el: '.mui-content',
				data: getDefaultData(),
				methods: {
					resetData: function() { //重置数据
						Object.assign(this.$data, getDefaultData());
					}
				}
			});
			
			var MyData;

			//监听自定义事件，获取新闻详情
			document.addEventListener('get_detail', function(event) {
				
				MyData=event.detail;
				var guid = event.detail.Id;
				if(!guid) {
					return;
				}

				//前页传入的数据，直接渲染，无需等待ajax请求详情后
				vm.cover = event.detail.PictureUrl;
				vm.title = event.detail.ArticleTitle;
				vm.author = event.detail.Author;
				vm.time = event.detail.PublishTime3;
				vm.hot = event.detail.HotValue;
				vm.authorabout = event.detail.AuthorAbout;
				document.getElementById("marticleContent").innerHTML = event.detail.ArticleContent;
			});

			//重写返回逻辑
			mui.back = function() {
				plus.webview.currentWebview().hide("auto", 300);
			}

			//窗口隐藏时，重置页面数据
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				self.addEventListener("hide", function(e) {
					window.scrollTo(0, 0);
					vm.resetData();
				}, false);
			})
		
		//-------------------------分享----------------
		function openShare() {
			shareWebview();
		}
		mui.plusReady(function() {
			ws = plus.webview.currentWebview();
			//关闭splash页面；
			plus.navigator.closeSplashscreen();
		})
		var sharew;
		var ws = null;
		/**
		 *分享窗口
		 */
		function shareWebview() {
			ws = plus.webview.currentWebview();
			if (sharew) { // 避免快速多次点击创建多个窗口
				return;
			}
			var top = plus.display.resolutionHeight - 134;
			var href = "share.html"; 
			sharew = plus.webview.create(href, "share.html", {
				width: '100%',
				height: '134',
				top: top,
				scrollIndicator: 'none',
				scalable: false,
				popGesture: 'none'
			}, {
				shareInfo: {
					"href": "www.baidu.com",
					"title": MyData.ArticleTitle,
					"content": MyData.ArticleTitle,
					"pageSourceId": MyData.Id
				}
			});
			sharew.addEventListener("loaded", function() {
				sharew.show('slide-in-bottom', 300);
			}, false);
			// 显示遮罩层  
			ws.setStyle({
				mask: "rgba(0,0,0,0.5)"
			});
			// 点击关闭遮罩层
			ws.addEventListener("maskClick", closeMask, false);
		}
 
		function closeMask() {
			ws.setStyle({
				mask: "none"
			});
			//避免出现特殊情况，确保分享页面在初始化时关闭 
			if (!sharew) {
				sharew = plus.webview.getWebviewById("share.html");
			}
			if (sharew) {
				sharew.close();
				sharew = null;
			}
		}
	</script>
	</body>

</html>